<template>
  <div>
    <div class="goods-container" v-for="item in list" :key="item.id">
      <!-- 左侧图片 -->
      <div class="thumb" >
        <div class="custom-control custom-checkbox">
          <!-- 复选框 -->
          <input type="checkbox" class="custom-control-input" :id="item.id" :checked="item.goods_state" @change="stateChange"/>
          <label class="custom-control-label" :for="item.id">
            <!-- 商品的缩略图 -->
            <img :src="item.goods_img2 " alt="" />
          </label>
        </div>
      </div>
      <!-- 右侧信息区域 -->
      <div class="goods-info">
        <!-- 商品标题 -->
        <h6 class="goods-title">{{ item.goods_name }}</h6>
          <!-- 商品价格 -->
        <div class="goods-info-bottom">
          <span class="goods-price">￥{{ item.goods_price }}</span>
        <!-- 删除商品 -->
          <a href="" @click.prevent='del(item.id)'>删除</a>
        </div>
      </div>
          <!-- 商品的数量 -->
      <Counter :num="item.goods_count" @num-change="getNewNum(item, $event)"></Counter>
          <!-- Footer 区域 -->
      <Footer :isfull="fullState" @full-change="getFullState" @del="delList" :amount="amt" :all="total"></Footer>
    </div>
  </div>
</template>

<script>
import Counter from '@/components/Counter/Counter.vue'
import Footer from '@/components/Footer/Footer.vue'
import bus from '@/components/eventBus.js'
export default {
  data() {
    return {
      // 用来存储购物车的列表数据，默认为空数组
      list: [
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/1.png', goods_name: '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣', goods_price: 108, goods_state: true, id: 1},
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/2.png', goods_name: '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮', goods_price: 129, goods_state: false, id: 2},
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/3.png', goods_name: '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣', goods_price: 108, goods_state: true, id: 3},
        {goods_count: 2, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/4.png', goods_name: '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣', goods_price: 188, goods_state: true, id: 4},
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/5.png', goods_name: '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮', goods_price: 208, goods_state: false, id: 5},
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/6.png', goods_name: '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣', goods_price: 168, goods_state: true, id: 6},
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/7.png', goods_name: '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣', goods_price: 108, goods_state: false, id: 7},
        {goods_count: 1, goods_img1: '', goods_img2: 'https://www.escook.cn/vuebase/pics/8.png', goods_name: '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮', goods_price: 188, goods_state: true, id: 8},
        {goods_count: 1, goods_img1: '', goods_img2: require("../../images/p1.jpg"), goods_name: '耐克玫瑰鞋', goods_price: 108, goods_state: true, id: 9},
     ]
    }
  },
  // 计算属性
  computed: {
    // add(){
    //   return this.list.push(this.id)
    // },
    // 动态计算出全选的状态是 true 还是 false
    fullState() {
      return this.list.every(item => item.goods_state)
    },
    // 已勾选商品的总价格
    amt() {
      // 1. 先 filter 过滤
      // 2. 再 reduce 累加
      return this.list
        .filter(item => item.goods_state)
        .reduce((total, item) => (total += item.goods_price * item.goods_count), 0)
      },
      // 已勾选商品的总数量
      total() {
        return this.list.filter(item => item.goods_state).reduce((t, item) => (t += item.goods_count), 0)
      }
    },
  methods: {
    //找到勾选状态
    stateChange(e){
      this.list[e.target.id-1].goods_state = e.target.checked
      // console.log(this.list[e.target.id-1].goods_state)
    },
    //接受Footer 子组件传递过来的全选按钮的状态
    getFullState(val){
      this.list.forEach(item => (item.goods_state = val))
    },
    // 获取 Counter 组件发过来的最新的数量值
    getNewNum(item, e) {
      item.goods_count = e
    },
    del(id) {
    //使用过滤器筛选出id不等于要删除的数据的所有对象，并将其重新赋值给list数组
     this.list = this.list.filter((item) => {
      return item.id != id
      });
    },
    cartchange(e){
      this.list=e
      // console.log(this.list);
    },
    //清空购物车
    delList(){
      this.list=[]
    }
  },
  components: {
    Counter,
    Footer
  },
  created(){
    bus.$on('share', val =>{
      // console.log('被触发',val)
      this.list.push(val)
    })
  }
}
</script>

<style lang="less" scoped>
.goods-container {
  width: 74%;
  margin-left: 13%;
  + .goods-container {
    border-top: 1px solid #efefef;
  }
  padding: 10px;
  display: flex;
  .thumb {
    display: flex;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      margin: 0 10px;
    }
  }

  .goods-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1;
    .goods-title {
      font-weight: bold;
      font-size: 12px;
    }
    .goods-info-bottom {
      display: flex;
      justify-content: space-between;
      .goods-price {
        font-weight: bold;
        color: red;
        font-size: 13px;
      }
    }
  }
}
</style>
